<template>
  <div class="empty" v-if="show">
    <div class="square-block">
      <div class="square-block-dummy"></div>
      <div class="square-block-box">
        <van-image :src="icon" />
      </div>
    </div>
    <h2 class="empty-tips">{{ title }}</h2>
    <p class="empty-tips">{{ tip }}</p>
    <div v-if="button" class="empty-button">
      <van-button @click="pushNativelink(button.link)" type="warning" round>{{ button.text }}</van-button>
    </div>
  </div>
</template>
<script>
import { Button, Image } from 'vant'
export default {
  components: {
    [Button.name]: Button,
    [Image.name]: Image
  },
  name: 'blank',
  props: {
    value: {
      type: Boolean,
      default: true
    },
    icon: {
      type: String,
      default: '/static/icons/blank.png'
    },
    title: {
      type: String,
      default: '暂无内容'
    },
    button: {
      type: Object,
      default: null
    },
    tip: {
      type: String,
      default: ''
    }
  },
  computed: {
    show () {
      console.log(this.value)
      return this.value
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.square-block {
  margin: 20% auto 0;
  border: 1px solid transparent;
  width: 40%;
  position: relative;

  &-dummy {
    margin-top: 100%;
  }

  &-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -moz-box-align: center;
    -moz-box-pack: justify;
    align-items: center;
    align-content: space-around;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    flex-wrap: nowrap;

    img {
      width: 100%;
      height: auto;
    }
  }

  &-dot {
    position: absolute;
    right: -8px;
    bottom: 8px;
    width: 8px;
    height: 16px;
    background: #0193cc;
  }
}

.empty {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  background: #f8f8f8;

  &-tips {
    text-align: center;
    font-size: 15px;
    font-weight: normal;
    color: #aaa;
  }
  &-button {
    padding: 10px 0;
    text-align: center;
    margin-top: 20px;
    .van-button {
      padding: 0 20px;
      height: 38px;
      line-height: 38px;
    }
  }
}
</style>
